<template>
  <el-row class="RangeDrawer">
    <commonDrawer
      title="添加字段"
      :drawer="drawer"
      :size="700"
      :isShowMoreBtn="true"
      @closeDraw="closeDraw"
      @cancelFun="closeDraw"
      @save="save"
    >
      <template slot="column">
        <div class="range-area">
          <el-input
            v-model="search"
            placeholder="请输入搜索内容"
            clearable
            style="margin-bottom: 10px"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <Title title="预置字段" style="margin-bottom: 13px"></Title>
          <div class="urlList">
            <div
              class="urlListItem"
              v-for="(item, index) in group"
              v-show="item.name.indexOf(search) > -1"
              :key="index"
            >
              <!-- 有别名要先取别名 -->
              <el-checkbox
                v-model="item.check"
                :disabled="customerRepeatRules.includes(item.field)"
                >{{ item.alias || item.name }}</el-checkbox
              >
              <div class="type">{{ item.typeName }}</div>
            </div>
            <div
              class="el-table__empty-text"
              style="width: 100%; text-align: center"
              v-if="!group.some((v) => v.name.indexOf(search) > -1)"
            >
              没有查询到符合条件的记录
            </div>
          </div>
          <Title title="自定义字段" style="margin: 16px 0px"> </Title>
          <div class="urlList">
            <div
              v-show="item.name.indexOf(search) > -1"
              class="urlListItem"
              v-for="(item, index) in group1"
              :key="index"
            >
              <el-checkbox v-model="item.check">{{ item.name }}</el-checkbox>
              <div class="type">{{ item.typeName }}</div>
            </div>
            <div
              class="el-table__empty-text"
              style="width: 100%; text-align: center"
              v-if="!group1.some((v) => v.name.indexOf(search) > -1)"
            >
              没有查询到符合条件的记录
            </div>
          </div>
        </div>
      </template>
    </commonDrawer>
  </el-row>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import commonDrawer from '@/components/globalTool/resizeDrawer/drawer.vue'
import Title from '../../../../newCustomer/common/title.vue'
import { getTypeName } from '../../customerFields/components/typeMap'
@Component({
  name: 'EditPanel',
  components: {
    commonDrawer,
    Title
  }
})
export default class EditPanel extends Vue {
  [x: string]: any
  @Prop({ default: () => [] }) private customerRepeatRules
  private drawer: boolean = false
  private drawerType: string = 'add'
  private data: any
  private search = ''
  private group: any = [] // 系统预置

  private group1: any = [] // 自定义

  private openDraw (systemFields: any = [], customFields: any = [], chooseFields: any = []) {
    this.group = systemFields
    this.group1 = []
    this.group1 = customFields.filter(item => item.enabled)
    this.group = this.group.map(v => {
      v.editable = false
      v.required = false
      v.typeName = getTypeName(v.type)
      chooseFields.map(item => {
        if (item.field === v.field) {
          v.check = true
          v.required = item.required
          v.editable = item.editable
        }
      })
      return v
    })
    this.group1 = this.group1.map(v => {
      v.editable = false
      v.required = false
      v.typeName = getTypeName(v.type)
      chooseFields.map(item => {
        if (item.field === v.field) {
          v.check = true
          v.required = item.required
          v.editable = item.editable
        }
      })
      return v
    })
    this.drawer = true
  }

  private closeDraw () {
    this.drawer = false
  }

  private save () {
    const chooseFields: any = []
    const allFields: any = this.group.concat(this.group1)
    allFields.map((item: any) => {
      if (item.check) {
        chooseFields.push({
          name: item.alias || item.name,
          field: item.field,
          type: item.type,
          typeName: item.typeName,
          required: item.required,
          editable: item.editable,
          choices: item.choices,
          options: item.options
        })
      }
    })
    this.$emit('editField', chooseFields)
    this.drawer = false
  }
}
</script>

<style lang="stylus" scoped>
/deep/ .el-checkbox
  width 100px
  overflow hidden
.RangeDrawer
  .range-area
    .urlList
      display flex
      flex-wrap wrap
      .urlListItem
        display flex
        align-items center
        margin 0 40px 20px 0
        .type
          width 140px
          height 32px
          background #FFFFFF
          border 1px solid #E7E9ED
          border-radius 4px
          margin-left 6px
          padding 9px 12px
          font-size 12px
          box-sizing border-box
          color #B4B9C8
</style>
